<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>nodeName,nodeValue</title>
  </head>
  <body>
    <!--nodeName,nodeValue-->
    <div id="container">这是一个元素节点</div>
    <script>
      var documentCount = 0;
      //document 
      log("document ",document);
      //doctype
      var doctype = document.doctype;
      log("doctype ",doctype);
      //html
      var htmlElement = document.documentElement;
      log("html ",htmlElement);

      var htmlAttr = htmlElement.attributes[0];
      log("html  attr",htmlAttr);

      //head
      var head = htmlElement.firstChild;
      log("head",head);

      var headMeta = head.childNodes[1];
      log("head meta",headMeta);

      var headMetaAttr = headMeta.attributes[0];
      log("head meta attr",headMetaAttr);

      var headTitle = headMeta.nextSibling.nextSibling;
      log("head title",headTitle);

      var headTitleText = headTitle.firstChild;
      log("head title Text",headTitleText);

      //body
      var body = document.body;
      log("body",body);

      var bodyComment = body.childNodes.item(1);
      log("body comment",bodyComment);
      
      var divElement = document.getElementById("container");
      log("div ",divElement);
      
      var divAttr = divElement.attributes.item(0);
      log("div attr",divAttr);

      var divTextElement = divElement.firstChild;
      log("div text",divTextElement);

      var scriptElement = document.body.childNodes.item(5);
      log("body script",scriptElement);

      var scriptElementText = document.body.childNodes.item(5).firstChild;
      log("body script text",scriptElementText);

      console.log("共有node节点："+documentCount+"个");



      function log(explanation,node){
        var strArr = [];
        strArr.push("节点位置: [ "+explanation+" ]");
        strArr.push("节点名字: "+node.nodeName);
        strArr.push("节点类型: "+node.nodeType);
        documentCount++;
        console.log(strArr.join("  "));
      }
      
    </script> 
  </body>
</html>